/**
 * 导航选项卡
 */
class topTab {
    constructor(id) {
        this.tabRoot = $(id)
        this.liEle = this.tabRoot.find('div').find('ul').find('li')
    }
    onTab() {
        let _this = this
        _this.liEle.on('mouseover', function () {
            $(this).addClass('active').siblings().removeClass('active')
        })
    }
}
let toptab = new topTab('.tab')
toptab.onTab()

/**
 * 列表选项卡
 */
class listTab {
    constructor(id) {
        this.tabRoot = $(id)
        this.liEle = this.tabRoot.find('div').find('ul').find('li')
    }
    onListTab() {
        let _this = this
        _this.liEle.on('mouseover', function () {
            $(this).addClass('active2').siblings().removeClass('active2')
            $(this).find('div').next().css('display', 'block')
        })
        _this.liEle.on('mouseout', function () {
            $(this).removeClass('active2')
            $(this).find('div').next().css('display', 'none')
        })
    }
}

let listtab = new listTab('.sidebar')
listtab.onListTab()



/**
 * 加载商品列表数据
 */
function loadProductList() {
    $.ajax({
        type: 'get',
        url: 'http://www.xiongmaoyouxuan.com/api/tab/1?start=0',
        success: function (result) {
            console.log(result)
            if (result.code == 200) {
                let productList = result.data.items.list
                showProductList(productList)
            }
        }
    })
}

/**
 * 查看更多
 */
function seeMore() {
    const showLoadMoreData = () => {
        $.ajax({
            type: 'get',
            url: ' http://www.xiongmaoyouxuan.com/api/tab/1/feeds?start=20&sort=0',
            success: function (result) {
                console.log(result)
                if (result.code == 200) {
                    let moreList = result.data.items.list
                    showProductList(moreList)
                }
            }
        })

    }

    const getloadMoreData = () => {
        const moreBtn = document.querySelector('.choice-more-btn')
        moreBtn.click = function () {
            showProductList(moreList)
        }
    }
}

/**
 * 显示商品列表界面
 */
function showProductList(list) {
    let str = ''
    list.forEach(list => {
        str += `
        <li class="base-commodity-list-item">
              <div class="commodity-card">
                  <div class="commodity-container">
                          <img src="${list.image}" alt="精选列表" class="commodity-card-img">
                  </div>
                  <div class="commodity-card-msg">
                          <div class="commodity-card-title">${list.title}</div>
                          <div class="commodity-card-keyword">
                              <span class="keyword tmall">${list.platform==1?'淘宝':'天猫'}</span>
                              <span class="keyword">${parseInt(list.couponValue)>=40 ? '大额券':''}</span>
                              <span class="keyword free-postage">${list.isFreePostage ==true ? '包邮':''}</span>
                          </div>
                          <div class="commodity-card-foot">
                              <div class="left">
                                  <span class="price">
                                      <span class="price-tag">￥</span>
                                      <span class="price-strong">${list.originPrice}</span>
                                      
                                  </span>
                                  <span class="sale-num">${list.saleNum}人已购买</span>
                              </div>
                              <span class="coupon-value">${list.couponValue}</span>
                          </div>
                  </div>
              </div>
       </li>
        `
    })
    $('.base-commodity-list').html(str)
}


/**
 * 返回顶部
 */
window.onscroll = function () {
    toToTop()
}

function toToTop() {
    const topBtn = document.querySelector('.back-top')
    if (document.body.scrollTop > 150 || document.documentElement.scrollTop > 150) {
        topBtn.style.display = "block";
    } else {
        topBtn.style.display = "none";
    }

    topBtn.onclick = function () {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
    }
}



loadProductList()
seeMore()
toToTop()